<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        .container {
            height: 100vh;
            width: 100vw;
            background-image:
                linear-gradient(90deg, rgba(100, 100, 100, 1) 50%, transparent 0),
                linear-gradient(rgba(0, 0, 0, .3) 50%, transparent 0);
            background-size: 200px 200px;
            overflow: hidden;
        }
        .word {
            width: auto;
            font-size: 32px;
            transition: transform 4000ms linear;
            color: white;
            text-shadow: 0 0 2px #000;
            position: absolute;
        }
    </style>
</head>
<body>

    <div class="container"></div>

    <script src="./data.js"></script>
    <script src="../data-viz/lib/jq.js"></script>
    <script>

        // 弹幕元素的个数
        const WORD_ELEMENT_COUNT = 50;

        function createBoxes () {
            const container = $('.container');
            for (let i = 0; i < WORD_ELEMENT_COUNT; i++) {
                // 设置每条弹幕的初始y值
                const y = Math.random() * 100;
                // 设置每条弹幕的初始x值为屏幕右侧
                const x = 100;
                container.append($(`
                    <div 
                        class="word"
                        style="transform: translate(${ x }vw, ${ y }vh);"
                        position-y="${ y }"
                    >
                        ${ data[i] }
                    </div>
                `));
            }
        }

        let currentIndex = 0;
        function animate () {
            setInterval(function () {
                const currentElement = $('.container .word').eq(currentIndex % WORD_ELEMENT_COUNT);
                const originY = currentElement.attr('position-y');
                const targetX = Math.random() * -100 - 20;
                currentElement.css({ 
                    transform: `translate(${ targetX }vw, ${ originY }vh)`,
                    visibility: 'visible',
                });
                setTimeout(() => {
                    // 重新设置当前弹幕的初始y值
                    const y = Math.random() * 100;
                    // 将当前弹幕归位
                    currentElement.css({ 
                        transform: `translate(100vw, ${ y }vh)`,
                        visibility: 'hidden',
                    });
                    currentElement.attr({ 'position-y': y });
                }, 5000);
                
                currentIndex++;
            }, 200);
        }

        createBoxes();
        animate();
    </script>
</body>
</html>